<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商铺分类</title>
    <link rel="shortcut icon" href="../static/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css">
    <link rel="stylesheet" type="text/css" href="../static/css/category.css">
</head>

<body>
    <header>
        <div class="container clearfix" id="top">
            <a href="index.html"><img class="logo" src="../static/img/logo.png"></a>
            <a class="topbar-item" href="index.html">首页</a>
            <a class="topbar-item active" href="category.html">商铺分类</a>
            <a class="topbar-item" href="my.html">个人中心</a>
            <nav>
                <a href="register.html">注册</a>
                <span>|</span>
                <a href="login.html">登录</a>
            </nav>
        </div>
    </header>
    <a id="toTop" title="回到顶部"><img src="../static/img/scroll_top1.png"></a>
    <div class="rest-banner">
        <div class="imgsort-wrapper">
            <span class="imgsort-filter-title">商家分类</span>
            <span class="imgsort-filter-split">|</span>
            <ul class="clearfix imgsort-content">
                <li class="fl  selected">
                    <a href="#" data-cate="cate_all" class="imgsort-list" title="全部">
              <span class="imgsort-info">全部</span>
            </a>
                </li>
                <li class="fl ">
                    <a class="imgsort-list" title="美食" href="#">
                <span class="imgsort-info">美食</span>
              </a>
                </li>
                <li class="fl ">
                    <a class="imgsort-list" title="正餐优选" href="#">
                <span class="imgsort-info">正餐优选</span>
              </a>
                </li>
                <li class="fl ">
                    <a class="imgsort-list" title="超市" href="#">
                <span class="imgsort-info">超市</span>
              </a>
                </li>
                <li class="fl">
                    <a class="imgsort-list" title="精选小吃" href="#">
                <span class="imgsort-info">精选小吃</span>
              </a>
                </li>
                <li class="fl ">
                    <a class="imgsort-list" title="鲜果购" href="#">
                <span class="imgsort-info">鲜果购</span>
              </a>
                </li>
                <li class="fl ">
                    <a class="imgsort-list" title="下午茶" href="#">
                <span class="imgsort-info">下午茶</span>
              </a>
                </li>
            </ul>
            <div class="search-box fr" id="searchBox">
                <input type="text" id="header-search" class="header-search fl" placeholder="搜索商家">
                <a href="javascript:;" class="doSearch fr"></a>
            </div>
        </div>
        <div class="divider"></div>
        <div class="rest-list">
            <ul class="itemlist">
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
                <li class="j-card">
                    <a href="detail.html" target="_blank">
                                    <div class="imgbox">
                                    
                                        <div class="borderbox">
                                            <img src="../static/img/demo.jpg" />
                                        </div>
                                    </div>
                                </a>
                    <div class="contentbox">
                        <a href="detail.html" target="_blank">
                                        <div class="header">
                                            <h4 class="title" title="华莱士（炸鸡汉堡文沃店)">华莱士（炸鸡汉堡文沃店)</h4>
                                        </div>
                                    </a>
                        <div class="footer">
                            <div class="rank clearfix">
                                <span class="star-ranking fl">
                                                <!-- 5颗星72px长度，算此时星级的长度 -->
                                                <!-- 算出空白填充的部分长度 -->
                                                <span class="star-score" style="width:67.68px;"></span>
                                </span>
                                <span class="score-num fl">4.7分</span>
                            </div>
                            <div class="price">
                                <span class="start-price mtsi-num">起送:￥15</span>
                                <span class="send-price mtsi-num">配送费:￥2</span>
                                <span class="send-time mtsi-num"><i class="icon i-poi-timer"></i>40分钟</span>
                            </div>
                            <div class="bottom-border"></div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="loading" id="loading">
		        <div class="isloading">点击加载更多商家</div>
		    </div>
        </div>

        <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="../static/js/base.js"></script>
        <script type="text/javascript">
        $(function() {
            $('.imgsort-content li').click(function() {
                $(this).siblings('li').removeClass('selected');
                $(this).addClass('selected');
            })
        })
        </script>
</body>

</html>